<template>
  <section class="content">
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基础信息" name="userinfo">
          <UserInfo ref="userinfo" :editable='editable' :userInfo="this.editUser.data.userInfo"></UserInfo>
        </el-tab-pane>
        <el-tab-pane label="补充信息" name="extrainfo">
          <ExtraInfo ref="extrainfo" :editable='editable' :extrainfo="this.editUser.data.extrainfo"></ExtraInfo>
        </el-tab-pane>
        <el-tab-pane label="家庭及社会关系" name="socialInfo">
          <Social ref="socialInfo" :editable='editable' :relations="this.editUser.data.relations"></Social>
        </el-tab-pane>
        <el-tab-pane label="在职培训" name="training">
          <Training :editable='editable' ref="training" :trainings="this.editUser.data.trainings"></Training>
        </el-tab-pane>
        <el-tab-pane label="在职进修学历(学位)教育" name="furtherEdu">
          <FurtherEdu :editable='editable' ref="furtherEdu" :educations="this.editUser.data.parttimeEdus"></FurtherEdu>
        </el-tab-pane>
        <el-tab-pane label="专业技术职务" name="professionTech">
          <ProfessionTech :editable='editable' ref="professionTech" :professionTechs="this.editUser.data.professionTechs"></ProfessionTech>
        </el-tab-pane>
        <el-tab-pane label="活动(竞赛)" name="race">
          <Race :editable='editable' ref="race" :races="this.editUser.data.races"></Race>
        </el-tab-pane>
        <el-tab-pane label="参与工程项目建设" name="project">
          <Project :editable='editable' ref="project" :projects="this.editUser.data.projects"></Project>
        </el-tab-pane>
        <el-tab-pane label="年度考核" name="kpi">
          <KPI :editable='editable' ref="kpi" :kpis="this.editUser.data.kpis"></KPI>
        </el-tab-pane>
      </el-tabs>
    </div>
  </section>
</template>
<script>
import Vue from 'vue'
import UserInfo from '../mycomponents/users/UserInfo'
import Training from '../mycomponents/users/Training'
import ExtraInfo from '../mycomponents/users/ExtraInfo'
import Mywizard from '../mycomponents/wizards/MyWizard'
import Social from '../mycomponents/users/Social'
import FurtherEdu from '../mycomponents/users/FurtherEdu'
import ProfessionTech from '../mycomponents/users/ProfessionTech'
import Race from '../mycomponents/users/Race'
import Project from '../mycomponents/users/Project'
import KPI from '../mycomponents/users/KPI'
require('moment')
Vue.component(Mywizard.name, Mywizard)
Vue.use(Mywizard)

export default {
  name: 'UserDataView',
  props: ['userData','editable'],
  components: {
    Mywizard,
    UserInfo,
    ExtraInfo,
    Social,
    Training,
    FurtherEdu,
    ProfessionTech,
    Race,
    Project,
    KPI
  },
  datetime() {
    return new Date()
  },
  data() {
    return {
      activeName: 'userinfo'
    }
  },
  created() {
    this.editUser = this.userData
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getData(){
      var userInfo = this.$refs.userinfo.getData()
      if(!userInfo){
        return null
      }
      this.editUser.data.userInfo = userInfo

      var extrainfo = this.$refs.extrainfo.getData()
      if(!extrainfo){
        return null
      }
      this.editUser.data.extrainfo = extrainfo

      var socialInfo = this.$refs.socialInfo.getData()
      this.editUser.data.relations = socialInfo

      var trainings = this.$refs.training.getData()
      this.editUser.data.trainings = trainings

      return this.editUser
    },
    nextClicked(currentPage) {
      console.log('next clicked', currentPage)
      if (currentPage == 0) {
        var userData = this.$refs.userinfo.getData()
        if(!userData){
          return false
        }
        this.userData.userInfo = userData
      }
      if (currentPage == 1) {
        var extraData = this.$refs.extrainfo.getData()
        if(!extraData){
          return false
        }
        this.userData.extrainfo = extraData
      }
      console.log('userData:' + JSON.stringify(this.userData))
      return true
    },
    backClicked(currentPage) {
      console.log('back clicked', currentPage)
      return true
    },
    clearInput(vueModel) {
      vueModel = ''
    },
    clearName() {
    },
    submit(e) {
      console.log('user data:' + JSON.stringify(this.userData))
    }
  }
}
</script>